<template>
  <el-dialog
    width="60%"
    top="0"
    :fullscreen="false" 
    :title="'详细信息'"
    :close-on-click-modal="false"
    :visible.sync="visible"  >

    <el-form :model="dataForm" id="printMe" ref="dataForm" label-width="130px">
      <el-row>
        <el-col :span="24">
          <div  style="text-align:center;font-weight:bold;font-size:20px;border-top:1px solid white;border-right:1px solid white;border-left:1px solid white;margin-bottom:30px;">商品房合同备案信息表</div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="合同签约备案号" prop="contractno" class="label_font">
            <el-input v-model="dataForm.contractno" placeholder="合同签约备案号" :disabled="true" style="100%"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="签约备案时间" prop="recorddate" class="label_font">
            <el-input v-model="dataForm.recorddate" placeholder="签约备案时间" :disabled="true" style="100%"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="出卖人" prop="seller" class="label_font">
            <el-input v-model="dataForm.seller" placeholder="出卖人" :disabled="true" style="100%"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
            <el-row>
        <el-col :span="24">
          <div   style="text-align:center;font-weight:bold;font-size:16px;background:#D3D3D3;border: 1px solid #ddd;height:40px;line-height:40px;">房屋信息</div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          
        <el-table
                :data="houselist"
                border
                v-loading="dataListLoading"
                @selection-change="selectionChangeHandle"
                style="width: 100%;">
            <el-table-column
                prop="djzl"
                header-align="center"
                align="center"
                label="房屋坐落">
            </el-table-column>
            <el-table-column
                prop="tableid"
                header-align="center"
                align="center"
                label="房屋唯一号">
            </el-table-column>
                

            <el-table-column               
                prop="dymj"
                header-align="center"
                align="center"
                label="用途">
            </el-table-column>

            <el-table-column
                prop="jzmj"
                header-align="center"
                align="center"
                label="建筑面积">
            </el-table-column>
            </el-table>
        </el-col>
      </el-row>
            <el-row>
        <el-col :span="24">
          <div  style=" text-align:center;font-weight:bold;font-size:16px;background:#D3D3D3;border: 1px solid #ddd;height:40px;line-height:40px;">抵押备案信息</div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">

        <el-table
            :data="dybaInfoList"
            border
            v-loading="dataListLoading"
            @selection-change="selectionChangeHandle"
            style="width: 100%;">

        <el-table-column
            prop="dyqr"
            header-align="center"
            align="center"
            label="贷款银行（抵押权人）">
        </el-table-column>

        <el-table-column
            prop="qlr"
            header-align="center"
            align="center"
            label="抵押人（债务人）">
        </el-table-column>
        
        <el-table-column
            prop="dymj"
            header-align="center"
            align="center"
            label="抵押面积">
        </el-table-column>
        </el-table>

        </el-col>
      </el-row>
            <el-row>
        <el-col :span="24">
          <div  style=" text-align:center;font-weight:bold;font-size:16px;background:#D3D3D3;border: 1px solid #ddd;height:40px;line-height:40px;">买受人</div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
                          <el-table
            :data="qlrList"
            border
            v-loading="dataListLoading"
            @selection-change="selectionChangeHandle"
            style="width: 100%;">
        <el-table-column
            prop="name"
            header-align="center"
            align="center"
            label="名称">
        </el-table-column>
        <el-table-column
            prop="idtype"
            header-align="center"
            align="center"
            label="证件类型">
        </el-table-column>
            
                <el-table-column
            prop="idcode"
            header-align="center"
            align="center"
            label="证件号码">
        </el-table-column>

        <el-table-column
             
            prop="protion"
            header-align="center"
            align="center"
            label="份额">
        </el-table-column>


        </el-table>
        </el-col>
      </el-row>

    </el-form>



    <span slot="footer" class="dialog-footer">
      <el-button  type="primary" v-print="printObj">打印</el-button>
      <el-button @click="visible = false">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    data () {
      return {

        printLoading: true,
        printObj: {
          id: "printMe",
          popTitle: '&nbsp;',
          beforeOpenCallback (vue) {
            vue.printLoading = true
            console.log('打开之前')
          },
          openCallback (vue) {
            vue.printLoading = false
            console.log('执行了打印')
          },
          closeCallback (vue) {
            console.log('关闭了打印工具')
          }
        },

        visible: false,
        houselist: [],
        dataListLoading: false,
        dybaInfoList: [],

        qlrList: [],
        dataForm:{
            contractno: '',
            recorddate: '',
            seller: ''
        }
      }
    },
    methods: {
      init (serialno) {
        this.dataListLoading = true;
        this.visible = true
        this.$nextTick(() => {

  
            this.$http({
              url: this.$http.adornUrl(`/bdc/bdccontract/detail`),
              method: 'post',
              data: this.$http.adornData({
                  'serialno': serialno
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.houselist = data.houseList
                this.dybaInfoList = data.dybaInfoList
                this.dataForm.seller = data.seller
                this.dataForm.recorddate = data.recorddate
                this.dataForm.contractno = data.contractno
                this.qlrList = data.qlrList
                this.dataListLoading = false;
              }
            })
          
        })
      }
     
     
    }
  }
</script>
<style>
.el-input.is-disabled .el-input__inner {
    background-color: #f5f7fa;
    border-color: #e4e7ed;
    color: #313b50;
    cursor: not-allowed;
}

</style>